<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>
</head>
<body>
    <h1>Wishes from the world!</h1>

    <p>
        Hello, {{ name }}. (Not {{ name }}? <a href="{{ url }}"> 
        {{ url_linktext }}!</a>)
    </p>
    <p>Send wishes to your friends, from around the world, at the
        time of their local time.</p>
    <p>Your friends:</p>
    <ul>
    {% for contact in contacts %}
        <li>
            <small>
                [<a href="/viewEvents?contactKey={{ contact.key }}">View events</a>]
                [<a href="/addEvent?contactKey={{ contact.key }}">Add event</a>]
            </small>
            <b><a title="{{ contact.email }}">{{ contact.name }}</a></b> 
        </li>
    {% endfor %}
    </ul>
    
    <button id="buttonAddContact">Add a contact</button>
    
    <div id="uiAddContact" style="display:none">
    <p>Add a contact:
        <form action="/addContact" method="post">
            Name: <input type="text" name="name" />
            Email: <input type="text" name="email" />
            <input type="submit" />
        </form>
    </p>
    </div>
    
    <div style="display:none">
    <p>
        Add an event:
        <form action="/addEvent" method="post">
            Name: <input type="text" name="type" />
            Email: <input type="text" name="date" />
            <input type="hidden" name="contactKey" />
            <input type="submit" />
        </form>
    </p>
    </div>
    
    <div style="display:none">
    <p>
        Add a wish:
        <form action="/addEvent" method="post">
            Name: <input type="text" name="wish" />
            Email: <input type="text" name="language" />
            <input type="hidden" name="contactKey" />
            <input type="submit" />
        </form>        
    </p>
    </div>
    
</body>
</html>
